<template>
  <div id="app">
    <div style="width: 100%; height: 200px;" ref="main2"></div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
    },
  },
  data() {
    return {
      popsList: [],
    };
  },
  created() {},
  mounted() {
    this.drawChart();
  },
  /* 5. Vue方法 */
  methods: {
    drawChart() {
        // 基于准备好的dom，初始化echarts实例
        let that = this;
        var series =[]
        that.data[0].forEach((item, index) => {
          series.push({
            name: item.name,
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            barWidth: 10,
            data: that.data[0][index].value
          })
        })
        // let myChart = this.$echarts.init(document.getElementById('main2'));
        let myChart = this.$echarts.init(this.$refs.main2);
        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            },
          },
          color: that.data[2],
          grid: {
            left: '10%',
            right: '4%',
            top: 16,
            bottom: 0,
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false
          },
          yAxis: {
            type: 'category',
            data: that.data[1],
            axisLine: {
              show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
              textStyle: {
                color: '#38BBEE'
                //fontSize: 18
              },
            },
          },
          series: series
        };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped lang="scss">
#main2 {
//   margin-top: 10px;
}
</style>
